Layui快速入门之第八节表格渲染与属性的使用

2024-06-15 22:56| 来源: 网络整理| 查看: 265

一：表格的渲染

API

方法配置渲染

模板配置渲染

静态表格渲染

二：表格的属性

基础属性

异步属性

返回数据中的特定字段

表头属性

重载

完整重载

仅数据重载 2.7+

获取选中行

设置行选中状态 2.8+

获取当前页接口数据

获取表格缓存数据集

重置尺寸

导出数据

获取配置项 2.8+

设置列显示或隐藏 2.8+

一：表格的渲染 API API 描述 var table = layui.table 获得 table 模块。 table.render(options) table 组件渲染，核心方法。 table.init(filter, options) 初始化渲染静态表格。 table.reload(id, options, deep) 表格完整重载。 table.reloadData(id, options, deep) 2.7+ 表格数据重载。 table.checkStatus(id) 获取选中行相关数据。 table.setRowChecked(id, opts) 2.8+ 设置行选中状态。 table.getData(id) 获取当前页所有行表格数据。 table.cache 获取表格缓存数据集（包含特定字段）。 table.resize(id) 重置表格尺寸。 table.exportFile(id, data, opts) 导出表格数据到本地文件。 table.getOptions(id) 2.8+ 获取表格实例配置项。 table.hideCol(id, cols) 2.8+ 设置表格列的显示隐藏属性。 table.on('event(filter)', callback) table 相关事件。

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式描述方法配置渲染通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐模板配置渲染通过标签的 lay-options="{}" 属性定义模板，组件自动对其进行解析并完成渲染。静态表格渲染对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。方法配置渲染

table.render(options);

参数 options : 基础属性配置项。#详见属性

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

layui.use(function(){ var table = layui.table; // 渲染，并获得实例对象 var inst = table.render({ elem: '#test', // 绑定元素选择器 // 其他属性 // … }); // 实例对象成员 inst.config; // 当前表格配置属性 inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。 inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。 inst.resize(); // 对当前表格重新适配尺寸 inst.setColsWidth() // 对当前表格重新分配列宽 }) 模板配置渲染

在元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。

Title

2.8 之前版本通过 lay-data="{}" 定义属性配置项； 2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。

静态表格渲染

table.init(filter, options);

参数 filter : 元素对应的 lay-filter 属性值参数 options : 基础属性配置项。#详见属性

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件

表格内容 layui.use(function(){ var table = layui.table; // 将静态表格进行动态化 table.init('test', { height: 366, // 其他属性 // … }); });

二：表格的属性

属性是指 table 渲染、重载时的配置选项（options），它本身是一个 object 参数。如：

// 渲染 table.render({ // options elem: '', cols: [[]], // … }); // 重载 table.reload(id, { // options }); 若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（： …

table 的属性众多，我们大致分为以下几种：

属性类别描述基础属性 - 异步属性用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。表头属性基础属性 cols 的子属性集。基础属性属性名描述类型默认值 elem 绑定原始 table 元素，方法渲染方式必填。 string/DOM -

url

发送异步请求的 URL。更多异步相关属性见 : #异步属性

- -

cols

表头属性集，通过二维数组定义多级表头。方法渲染时必填。更多表头属性见 : #表头属性

array - data

直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。

【本文地址】

公司简介

联系我们

Layui快速入门之第八节 表格渲染与属性的使用

Layui快速入门之第八节表格渲染与属性的使用